<script>
import TxOneComm from "@/components/views/answer/TxOneComm.vue";
import TxTwoComm from "@/components/views/answer/TxTwoComm.vue";
import TxThreeComm from "@/components/views/answer/TxThreeComm.vue";
import TxFourComm from "@/components/views/answer/TxFourComm.vue";
import Quit from "@/components/views/answer/util/Quit.vue";
export default {
  // 随机5道题，进行测试
  name: "StartTest",
  components: {Quit, TxThreeComm, TxTwoComm, TxOneComm,TxFourComm},  //引入任务一，答题组件
  data(){
    return {
      ques:'',
      que_index:0,
      isTestFinished:false,
      to_rest:false,
      is_begin:false,
      can_not_use:true,
      to_rest2:false,
      url_address:'ques/getTestQues?task_type=',
      show_message:false,
      current_tx:'',
      answerVo:{
        accId:'',
        taskId:'',
        answers:'',
        times:'',
        questionIds:'',
        isRights:'',
        rightRate:'',
        scoreTypes:'',
        rightCount:0,  //统计总计正确数量，计算正确率
        answerAge:0, //用户登陆时，获取用户的年龄
      }
    }
  },
  created() {
    this.beginPc();

  },
  mounted() {
    window.addEventListener('beforeunload', this.beforeUnload);
  },
  methods:{

    //开始测试
    beginPc(){
        const taskType =  Number(this.$store.state.acc_task_type);
        this.current_tx = taskType;
        if(taskType!=0){
            const _this = this;
            this.$http.get(_this.url_address+taskType).then(res=>{
                if(res.data.success){
                  _this.ques = res.data.data;
                  //开始做答第一题
                  _this.$refs.aqc.show_comm(this.ques[this.que_index]);
                }else{
                  _this.$message.error(res.data.errMsg);
                }
            })
        }else{
          this.$message.warning("请选择任务后，再进行测试");
          this.$router.push("/que_list");
        }
    },

    test_finished(answer,spendTime,isRight){
      if(this.is_begin){
        //正式答题，记录答题结果，
        // 当前的问题
        const question = this.ques[this.que_index];
        this.answerVo.answers+= answer+","
        this.answerVo.times+= spendTime+","
        this.answerVo.questionIds+= question.id+",";
        this.answerVo.isRights+= isRight+",";
        this.answerVo.scoreTypes+= question.scoreType+",";
        if(isRight=='是') {
          this.answerVo.rightCount++;
        }
        // console.log(this.que_index,spendTime,answer,isRight);
      }else{
        // 测试答题，弹出对错信息
        if(isRight=='是'){
                this.$message({
                  message: "<span style='font-size: 32px;color:blue'>回答正确！</span>",
                  type: 'success',
                  dangerouslyUseHTMLString: true,
                });
          }else{
            this.$message({
              message: "<span style='font-size: 32px;color:red'>回答错误！</span>",
              type: 'error',
              dangerouslyUseHTMLString: true,
            });
        }
      }

      if(this.que_index<this.ques.length-1){
        this.que_index++;
        if(this.que_index%30==0){
          //30题,且不是最后一题，则进行休息
          this.to_rest = true;
          const _this = this;
          this.$nextTick(()=>{
            window.setTimeout(function(){
              _this.can_not_use = false;
            },1500)
          })
        }else{
          this.$refs.aqc.show_comm(this.ques[this.que_index]);
        }
      }else{
        if(this.is_begin){
            //结束答题，对答案进行整理，并上传答案
            this.answerVo.answers = this.answerVo.answers.slice(0,-1);
            this.answerVo.times = this.answerVo.times.slice(0,-1);
            this.answerVo.questionIds = this.answerVo.questionIds.slice(0,-1);
            this.answerVo.scoreTypes = this.answerVo.scoreTypes.slice(0,-1);
            this.answerVo.isRights = this.answerVo.isRights.slice(0,-1);
            this.answerVo.rightRate = Math.round((this.answerVo.rightCount/this.ques.length)*100) / 100;
            this.answerVo.accId = sessionStorage.getItem("accountId");
            this.answerVo.answerAge = sessionStorage.getItem("accAge");
            this.answerVo.taskId = this.$store.state.acc_task_id;
            //提交答案
            this.sub_answer();
        }else{
            //结束练习，是否继续
          this.isTestFinished = true;
        }
      }
    },

    //提交答案到服务端
    sub_answer(){
      const _this = this;
      this.$http.post('answers/commit_answer',this.answerVo).then(res=>{
          if(res.data.success){
            _this.$message.success("恭喜，答题完成。")
            _this.$router.push('/que_list')
          }else{
            _this.$message.error(res.data.errMsg)
          }
      })
    },

    //阻止页面刷新
    beforeUnload(event) {
      event.returnValue = '你所做的答案未被保存！';
      return "你所做的答案未被保存"
    },

    //继续练习
    re_try(){
        this.is_begin = false;
        this.que_index = 0;
        this.isTestFinished = false;
        this.beginPc();
    },

    //开始答题
    start_test(){
        this.is_begin = true;
        this.que_index = 0;
        this.isTestFinished = false;
        this.url_address = 'ques/getStartQues?task_type=';
        this.answerVo.rightCount = 0;
        this.answerVo = {
          accId:'',
          taskId:'',
          answers:'',
          times:'',
          questionIds:'',
          scoreTypes:'',
          isRights:'',
          rightRate:'',
          rightCount:0,
          answerAge:0,
        }
        this.beginPc();
    },

    //休息后，继续答题
    re_start(){
        this.to_rest= false;
        this.can_not_use = true;
        const that = this;
        this.$nextTick(()=>{
          this.$refs.aqc.show_comm(this.ques[this.que_index]);
        })
    },

    pause(){
        this.to_rest2 = true;
        const _this = this;
        this.$nextTick(()=>{
          window.setTimeout(function(){
            _this.can_not_use = false;
          },1500)
        })
    },

    re_start2(){
      this.to_rest2= false;
      this.can_not_use = true;
      this.$nextTick(()=>{
        this.$refs.aqc.show_comm(this.ques[this.que_index]);
      })
    }

  }
}
</script>

<template>

  <div ref="qt_div1" class="qt_div1">

      <el-row style="width:100%;position: fixed;top:20px;display: flex;justify-content: right;margin-right: 40px" >
        <Quit>
          <el-button type="warning" @click="pause" style="font-size: 25px;">
            暂停
          </el-button>
        </Quit>
      </el-row>

      <TxOneComm v-if="!isTestFinished && current_tx==1 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxOneComm>
      <TxTwoComm v-if="!isTestFinished && current_tx==2 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxTwoComm>
      <TxThreeComm v-if="!isTestFinished && current_tx==3 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxThreeComm>
      <TxFourComm v-if="!isTestFinished && current_tx==4 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxFourComm>
      <TxOneComm v-if="!isTestFinished && current_tx==5 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxOneComm>
      <TxThreeComm v-if="!isTestFinished && current_tx==6 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxThreeComm>
      <TxTwoComm v-if="!isTestFinished && current_tx==7 && !to_rest && !to_rest2 && !show_message" ref="aqc" @ans_finish="test_finished"></TxTwoComm>

    <div v-else-if="isTestFinished" class="qt_div2">
      <p class="qt_p1">练习完毕</p>
      <p class="qt_p2">如果你还不了解该测试，请点击左侧按钮继续练习；</p>
      <p class="qt_p2">如果你已了解该测试，请按右侧按钮进入正式作答。</p>
      <div style="display: flex;justify-content: space-between;margin-top: 20px">
        <el-button class="qt-btn1" @click="re_try" type="primary">继续练习</el-button>
        <el-button class="qt-btn1" @click="start_test" type="primary">正式作答</el-button>
      </div>
    </div>

    <div v-else-if="to_rest" class="qt_div2">
      <p class="qt_p1">已连续作答30题,可休息后继续答题</p>
      <p class="qt_p2">休息时请勿离开或刷新此页面</p>
      <div style="display: flex;justify-content: space-between;margin-top: 20px">
        <el-button class="qt-btn1" ref="reStartBtn" :disabled="can_not_use" @click="re_start" type="primary">继续答题</el-button>
      </div>
    </div>

    <div v-else-if="to_rest2" class="qt_div2">
      <p class="qt_p1">当前为暂停答题状态,可休息后继续答题</p>
      <p class="qt_p2">休息时请勿离开或刷新此页面</p>
      <div style="display: flex;justify-content: space-between;margin-top: 20px">
        <el-button class="qt-btn1" ref="reStartBtn" :disabled="can_not_use" @click="re_start2" type="primary">继续答题</el-button>
      </div>
    </div>

    <div v-if="show_message">
        <h2>×答案错误</h2>
<!--        <h2>√答案正确</h2>-->
    </div>
  </div>

</template>

<style scoped>
/deep/.qt-btn1{
  width: 250px;
  height: 70px;
  font-size: 45px;
}
.qt_div2{
  margin-top: -10%;
  //background-color: red;
}
.qt_p1{
  width: 100%;

  text-align: center;
  font-size: 45px;
  font-weight: 700;
  line-height: 80px;
}
.qt_p2{
  font-size: 30px;
  font-weight: 500;
  line-height: 80px;
}
.qt_div1{
  height: 100%;
  width: 100%;
  background-color: #e0f6f1;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
</style>